<!DOCTYPE html>
<html>
<head>
	<title>css-positioning</title>
	<meta charset="utf-8">
	<style type="text/css">
		img{
			position: absolute;
			left: 10px;
			top: 100px;
			z-index: -1;
		}

		img.test{
			position: absolute;
			left: 400px;
			top: 100px;
			z-index: 1;
			clip:rect(20px, 100px, 200px, 0px);
		}
	</style>
</head>
<body>
	<h1>This is a heading</h1>
	<img src="css/img/w3css.gif" width="100" height="140" />
	<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>

	<div>
		<img class="test" src="css/img/w3css.gif" width="100" height="140" />
	</div>
</body>
</html>